<template>
	<view>
		<!-- 顶部导航栏 -->
		<view class="header">
			<x-status-bar></x-status-bar>
			<view class="flex-center-between header-navbar">
				<x-back-btn></x-back-btn>
				<view class="u-f-40 common-title">{{ lang_note.sendNote_relationShop }}</view>
				<view></view>
			</view>
			
			<!-- 搜索框 -->
			<view style="padding: 0 40rpx 28rpx">
				<view class="search-input flex-center">
					<image
					src="@/static/image/common/search.png"
					style="width: 32rpx; height: 32rpx"
					class="clear-flex u-m-r-16"></image>
					<input
					v-model="keyword"
					:placeholder="lang_note.shopSearch"
					style="width: 100%;"
					@input="searchAction"
					/>
				</view>
			</view>
		</view>
		
		<!-- 内容 -->
		<view>
			<mescroll-body height="calc(100vh - 480rpx)" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
				>
				<view style="padding: 14rpx 32rpx 0;">
					<view>
						<view
						class="relation-container u-m-b-12"
						v-for="(item, index) in dataList"
						:key="index"
						@click="selectRelation(item)"
						>
							<view class="flex-center">
								<view class="relation-avatar clear-flex u-m-r-16">
									<x-image :src="showImage(item.logoImgUrl, 'logo')"/>
								</view>
								
								<view class="flex-between flex-column">
									<view class="u-f-34 u-lh-48 font-medio">{{ item.name || '' }}</view>
									
									<view class="u-f-24 u-lh-34 color-grew">{{ formatAddress(item, 1) || '' }}</view>
								</view>
							</view>
							
							<view></view>
						</view>
					</view>
				</view>
			</mescroll-body>
			<!-- 留空 -->
			<view style="height: 200rpx"></view>
		</view>
	</view>
</template>

<script>
	import { merchantPage } from '@/api/user/merchant.js'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";

	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				eventChannel: null,
				keyword: '',
				dataList: [],
				
				timer: null
			}
		},
		computed: {
			
		},
		onLoad() {
			// 获取页面数据
			this.eventChannel = this.getOpenerEventChannel();
			this.eventChannel.on('changeRelation', relation => {
				this.relation = relation || {}
			})
		},
		methods: {
			// 选择商家后返回页面
			selectRelation(relation = {}) {
				this.eventChannel.emit('changeAction', relation)
				this.jumpBack()
			},
			// 搜索数据
			searchAction() {
				clearTimeout(this.timer)
				this.timer = setTimeout(() => {
					clearTimeout(this.timer)
					this.downCallback()
				}, 300)
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				let node = this.$refs['mescrollRef']
				merchantPage({
					pageNumber: page.num,
					pageSize: page.size,
					keyword: this.keyword
				}).then(res => {
					node && node.mescroll.endSuccess(res.list.length);
					if (page.num == 1) this.dataList = []; //如果是第一页需手动制空列表
					this.dataList = this.dataList.concat(res.list); //追加新数据
				}).catch(() => {
					node && node.mescroll.endErr();
				})
			},
			downCallback() {
				let node = this.$refs['mescrollRef']
				node && node.mescroll.resetUpScroll()
			}
		}
	}
</script>

<style scoped lang="scss">
	.search-input {
		width: 688rpx;
		padding: 22rpx 26rpx 24rpx;
		border-radius: 100rpx;
		background-color: #F6F6F6;
	}
	
	.relation {
		&-avatar {
			width: 76rpx;
			height: 76rpx;
			border-radius: 14rpx;
			background-color: #f9f9f9;
		}
		&-container {
			padding: 16rpx 22rpx 18rpx;
			border-radius: 16rpx;
			background-color: #f9f9f9;
		}
	}
	
</style>
